<template>
  <div class="f_div">
    <div class="t_div">设置 / <a href="#">员工管理</a></div>
    <el-container>
      <el-header class="header"
        ><div class="h_div">
          <div class="h_in_vid">员工信息</div>
        </div></el-header
      >
      <el-main class="main">
        <el-form
          style="max-width: 600px"
          :model="tableData"
          label-width="auto"
          ref="form"
          :rules="rules"
          status-icon
          accept=".jpg"
        >
          <el-form-item label="账号" prop="emp_account">
            <el-input
              v-model="tableData.emp_account"
              style="width: 240px"
              class="form_content"
            />
          </el-form-item>
          <el-form-item label="初始登录密码" prop="emp_password">
            <el-input
              v-model="tableData.emp_password"
              style="width: 240px"
              class="form_content"
            />
          </el-form-item>
          <el-form-item label="员工姓名" prop="emp_name">
            <el-input
              v-model="tableData.emp_name"
              style="width: 240px"
              class="form_content"
            />
          </el-form-item>
          <el-form-item label="手机号码" prop="emp_mobile">
            <el-input
              v-model="tableData.emp_mobile"
              style="width: 240px"
              class="form_content"
            />
          </el-form-item>
          <el-form-item label="所属部门" prop="depart_id">
            <el-select
              v-model="tableData.depart_id"
              placeholder="Select"
              style="width: 240px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择角色" prop="role_id">
            <el-radio-group v-model="tableData.role_id">
              <el-radio :value="3">Option A</el-radio>
              <el-radio :value="6">Option B</el-radio>
              <el-radio :value="9">Option C</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="员工状态" prop="emp_status">
            <el-switch v-model="tableData.emp_status" />
          </el-form-item>
          <el-form-item label="备注" prop="emp_remark">
            <el-input
              v-model="tableData.emp_remark"
              type="textarea"
              style="width: 240px"
              class="form_content"
            />
          </el-form-item>
          <div class="btn_div">
            <el-form-item>
              <el-button type="primary" @click="onSubmit" class="btn"
                >保存</el-button
              >
              <!-- <el-button>Cancel</el-button> -->
            </el-form-item>
          </div>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>


<script>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getRandomString } from "@/randomString/random.js";
import { useRouter } from "vue-router";
import $http from "@/axios/base";

export default {
  name: "app",
  setup() {
    const tableData = reactive({
      employee_id: 0,
      role_id: 0,
      depart_id: 0,
      emp_account: "",
      emp_password: "",
      emp_name: "",
      emp_mobile: "",
      emp_status: "",
      emp_remark: "",
      create_by: sessionStorage.getItem("empname"),
      create_time: new Date().toISOString().slice(0, 10).toString(),
      update_by: "",
      update_time: "",
      is_del: 0,
    });

    const rules = reactive({
      emp_account: [
        {
          required: true,
          message: "账号不能为空！！！",
          trigger: "blur",
        },
      ],
      emp_password: [
        {
          required: true,
          message: "密码不能为空！！！",
          trigger: "blur",
        },
      ],
      emp_name: [
        {
          required: true,
          message: "员工姓名不能为空！！！",
          trigger: "blur",
        },
      ],
      emp_mobile: [
        {
          required: true,
          message: "手机号码不能为空！！！",
          trigger: "blur",
        },
      ],
    });

    let upload = ref(null);
    let router = useRouter();
    const form = ref(null);

    function onSubmit() {
      form.value.validate((valid) => {
        if (valid) {
          //这里可以执行提交表单的操作，比如发送请求到后端
          tableData.update_by = sessionStorage.getItem("empname");
          tableData.update_time = new Date()
            .toISOString()
            .slice(0, 10)
            .toString();
          $http
            .put("http://localhost:5261/api/Company/UpdCompany", tableData)
            .then((res) => {
              if (res) {
                // ElMessage.success("添加成功！！！");
                location.reload();
                setTimeout(() => {
                  ElMessage.success("操作成功！！！");
                }, 1000);
              } else {
                ElMessage.error("操作失败！！！");
              }
            })
            .catch((err) => console.log(err));
        } else {
          //验证没有通过
          ElMessage.warning("请填写完整数据！！！");
        }
      });
    }

    const codeVisible = true;
    const dialogImageUrl = ref("");
    const dialogVisible = ref(false);
    const disabled = ref(false);

    function handleRemove(file) {
      tableData.comp_logo = "";
      upload.value.clearFiles();
    }

    function handlePictureCardPreview(file) {
      dialogImageUrl.value = file.url;
      dialogVisible.value = true;
    }

    function handleDownload(file) {
      var now = new Date();

      // 获取年、月、日、时、分、秒
      var year = now.getFullYear();
      var month = now.getMonth() + 1; // 注意月份是从 0 开始的
      var day = now.getDate();
      var imageUrl = file.url;
      var link = document.createElement("a");
      link.href = imageUrl;
      link.download =
        "七尾-" + year + month + day + getRandomString(8) + ".jpg";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }

    const handleUploadSuccess = (response, file, fileList) => {
      // 处理上传成功的逻辑，如显示成功消息或更新UI
      console.log("上传成功", response, file, fileList);
      rulelist.url = response.result.url;
      tableData.comp_logo = response.result.url;
    };

    const handleUploadError = (error, file, fileList) => {
      // 处理上传失败的逻辑，如显示错误消息或更新UI
      console.error("上传失败", error, file, fileList);
      ElMessage.error("上传失败，文件大小或类型不符合要求");
    };

    function handleExceed(files) {
      // 当上传的文件数量超过限制时，清空已上传的文件列表，并上传最新的文件
      upload.value.clearFiles();
      const file = files[0]; // 获取最新的文件
      file.uid = Date.now(); // 为文件生成唯一的标识符
      upload.value.handleStart(file); // 开始上传最新的文件
      upload.value.submit();
    }

    function getcode() {
      $http
        .get("http://localhost:5261/api/BH/BHGZ", {
          params: {
            prefix: "QY",
          },
        })
        .then((res) => {
          tableData.comp_code = res;
        })
        .catch((err) => console.log(err));
    }

    function show() {
      $http
        .get("http://localhost:5261/api/Company/GetCompany")
        .then((res) => {
          tableData.comp_id = res.comp_id;
          tableData.comp_name = res.comp_name;
          tableData.comp_logo = res.comp_logo;
          rulelist.value[0].url = res.comp_logo;
          tableData.comp_code = res.comp_code;
          tableData.contact_by = res.contact_by;
          tableData.contact_phone = res.contact_phone;
          tableData.comp_address = res.comp_address;
          tableData.comp_Remark = res.comp_Remark;
        })
        .catch((err) => console.log(err));
    }

    onMounted(() => {
      getcode();
      show();
    });

    return {
      codeVisible,
      form,
      rulelist,
      router,
      rules,
      upload,
      tableData,
      dialogImageUrl,
      dialogVisible,
      disabled,
      handleRemove,
      handlePictureCardPreview,
      handleDownload,
      onSubmit,
      handleExceed,
      handleUploadError,
      handleUploadSuccess,
      getcode,
    };
  },
};
</script>

<style scoped>
.btn {
  top: auto;
  right: 90px;
  position: fixed;
  bottom: 42px;
  z-index: 1000;
  width: 80px;
  height: 35px;
}

.btn_div {
  border-radius: 10px 10px 0px 0px;
  padding-right: 37px;
  margin-top: 20px;
  height: 80px;
  background-color: #ffffff;
  width: 1540px;
  position: fixed;
  /* 固定位置 */
  top: auto;
  /* 距离顶部20像素 */
  right: 70px;
  /* 距离右侧20像素 */
  bottom: 20px;
  /* 底部自动 */
  left: auto;
  /* 左侧自动 */
  z-index: 1000;
  /* 确保它在其他内容之上 */
}

.el-radio-group {
  margin-right: 12px;
}
.t_div {
  margin-bottom: 20px;
  text-align: left;
  font-size: 14px;
  color: #b3b4b6;
}
a {
  text-decoration: none;
}
.f_div {
  padding: 0px 50px;
}
.h_div {
  border-bottom: 1px solid #f2f2f2;
  height: 39px;
}
.h_in_vid {
  width: 100px;
  height: 20px;
  margin-top: 20px;
  border-left: 5px solid #006eff;
}
.header {
  background-color: #ffffff;
  border-radius: 10px 10px 0px 0px;
}
.main {
  background-color: #ffffff;
  border-radius: 0px 0px 10px 10px;
  height: 560px;
}
.form_content {
  margin-left: 50px;
}
</style>